<template>
  <li class="li">
    <div class="CourseId">
      <label class="info" id="courseId">{{ thing[0] }}</label>
    </div>
    <div class="CourseName">
      <label class="info" id="courseName">{{ thing[1] }}</label>
    </div>
    <div class="Teacher">
      <Label class="info" id="teacher">{{ thing[2] }}</Label>
    </div>
    <div class="ClassId">
      <Label class="info" id="classId">{{ thing[3] }}</Label>
    </div>
    <div class="ClassNumber">
      <Label class="info" id="classNumber">{{ thing[4] }}</Label>
    </div>
    <div class="Button">
      <label class="info">编辑</label>
    </div>
    <div class="Button2">
      <label class="info">删除</label>
    </div>
  </li>
</template>
  
  <script>
export default {
  name: "TopOfClassManage",
  props: ["thing"],
  data() {
    return {};
  },
};
</script>
  

<style scoped>
.li {
  display: flex;
  flex-direction: row;  
}

.CourseId,
.CourseName,
.Teacher,
.ClassId,
.ClassNumber,
.Button,
.Button2{
  text-align: center;
  background-color: rgba(224, 230, 241, 0.6);
  height: 40px;
  border: 0.5px solid rgb(178, 178, 178);
  border-top: 1px solid rgb(178, 178, 178);
}
.CourseId {
  width: 150px;
  border-left: 4px solid rgb(181, 188, 203);
}
.CourseName {
  width: 250px;
}
.Teacher {
  width: 150px;
}
.ClassId {
  width: 150px;
}
.ClassNumber{
    width:150px;
}
.Button {
  width: 150px;
}
.Button2 {
  width: 150px;
} 
.info {
  position: relative;
  top: 8px;
  font-family: "黑体";
  font-weight: 1000;
}
li {
  height: 40px;
  width: 1050px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
</style>